<!-- 顶部信息栏 -->
<template>
  <header id="topbar">
    <el-dialog
      :append-to-body="true"
      style="z-index: 2028px"
      title="修改密码"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form
        status-icon
        ref="ruleForm2"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="旧密码" prop="pass">
          <el-input
            type="password"
            v-model="oldPsw"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="pass">
          <el-input
            type="password"
            v-model="newPsw"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="checkPass">
          <el-input
            type="password"
            v-model="confirmNewPsw"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="resetPsw">确 定</el-button>
            </span>
    </el-dialog>
    <el-dialog
      :append-to-body="true"
      style="z-index: 2028px"
      title="修改密码"
      :visible.sync="updatePwd"
      width="30%"
    >
      <el-form
        status-icon
        ref="ruleForm2"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="旧密码" prop="pass">
          <el-input
            type="password"
            v-model="oldPsw"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="pass">
          <el-input
            type="password"
            v-model="newPsw"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="checkPass">
          <el-input
            type="password"
            v-model="confirmNewPsw"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="updatePwd = false">取 消</el-button>
                <el-button type="primary" @click="updatePawd">确 定</el-button>
            </span>
    </el-dialog>

    <el-row>
      <el-col :span="6" class="topbar-left">
        <i class="el-icon-a-03" style="font-size: 36px; color: white;margin: 23px 5px 0 0;"></i>
        <span style="font-size: 32px; font-weight: 600; color: white;">在线考试系统后台</span>

      </el-col>
      <el-col :span="18" class="topbar-right">
        <i @click="toggle()"></i>
        <div class="user">
          <span>{{ user.userName }}</span>
          <img
            src="@/assets/img/userimg.png"
            class="user-img"
            ref="img"
            @click="showSetting()"
          />
          <transition name="fade">
            <div class="out" ref="out" v-show="login_flag">
              <ul>
                <li v-if="role == 0">
                  <a
                    @click="dialogVisible = true"
                    href="javascript:;"
                  >修改密码</a
                  >
                </li>
                <li v-if="role == 1">
                  <a
                    @click="updatePwd = true"
                    href="javascript:;"
                  >修改密码</a
                  >
                </li>
                <li class="exit" @click="exit()">
                  <a href="javascript:;">退出登录</a>
                </li>
              </ul>
            </div>
          </transition>
        </div>
      </el-col>
    </el-row>
  </header>
</template>

<script>
import {mapState, mapMutations} from "vuex";

export default {
  data() {
    return {
      login_flag: false,
      user: {
        //用户信息
        userName: null,
        userId: null,
      },
      dialogVisible: false,
      updatePwd: false,
      oldPsw: "",
      newPsw: "",
      confirmNewPsw: "",
      role: 0,
    };
  },
  created() {
    this.getUserInfo();

    this.role = this.$cookies.get("role");
  },
  computed: mapState(["flag", "menu"]),
  methods: {
    // 管理员重置密码
    resetPsw() {
      if (this.oldPsw == "") {
        this.$message("请输入旧密码");
        return;
      }
      if (this.newPsw == "") {
        this.$message("请输入新密码");
        return;
      }
      if (this.confirmNewPsw == "") {
        this.$message("请输入确认新密码");
        return;
      }
      if (this.confirmNewPsw != this.newPsw) {
        this.$message("两次新密码不一致");
        return;
      }
      this.$axios(
        `/api/admin/resetPsw/${this.user.userId}/${this.oldPsw}/${this.newPsw}`
      ).then((res) => {
        let status = res.data.status;
        if (status == 200) {
          if (res.data.data != true) {
            this.$message(res.data.message);
          } else {
            // 修改成功
            this.$message("修改成功");
            this.dialogVisible = false;
            this.oldPsw = "";
            this.newPsw = "";
            this.confirmNewPsw = "";
          }
        }
      });
    },
    updatePawd() {
      if (this.oldPsw == "") {
        this.$message("请输入旧密码");
        return;
      }
      if (this.newPsw == "") {
        this.$message("请输入新密码");
        return;
      }
      if (this.confirmNewPsw == "") {
        this.$message("请输入确认新密码");
        return;
      }
      if (this.confirmNewPsw != this.newPsw) {
        this.$message("两次新密码不一致");
        return;
      }
      this.$axios(
        `/api/tacher/resetPsw/${this.user.userId}/${this.oldPsw}/${this.newPsw}`
      ).then((res) => {
        let status = res.data.status;
        if (status == 200) {
          if (res.data.data != true) {
            this.$message(res.data.message);
          } else {
            // 修改成功
            this.$message("修改成功");
            this.updatePwd = false;
            this.oldPsw = "";
            this.newPsw = "";
            this.confirmNewPsw = "";
          }
        }
      });
    },
    //显示、隐藏退出按钮
    showSetting() {
      this.login_flag = !this.login_flag;
    },
    //左侧栏放大缩小
    ...mapMutations(["toggle"]),
    getUserInfo() {
      //获取用户信息
      let userName = this.$cookies.get("cname");
      let userId = this.$cookies.get("cid");
      this.user.userName = userName;
      this.user.userId = userId;
    },
    index() {
      this.$router.push({path: "/index"});
    },
    exit() {
      let role = this.$cookies.get("role");
      this.$router.push({path: "/"}); //跳转到登录页面
      this.$cookies.remove("cname"); //清除cookie
      this.$cookies.remove("cid");
      this.$cookies.remove("role");
      this.$cookies.remove("rb_token"); //清除cookie
      this.$cookies.remove("rb_role");
      if (role == 0) {
        this.menu.pop();
      }
    },
  },
};
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
{
  opacity: 0;
}

#topbar {
  position: relative;
  z-index: 10;
  background-color: CornflowerBlue;
  height: 80px;
  line-height: 80px;
  color: #fff;
  box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.5);
}

#topbar .topbar-left {
  height: 80px;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.topbar-left .icon-kaoshi {
  font-size: 60px;
}

.topbar-left .title {
  font-size: 20px;
  cursor: pointer;
}

.topbar-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topbar-right .user-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.topbar-right .el-icon-menu {
  font-size: 30px;
  margin-left: 20px;
}

.topbar-right .user {
  position: relative;
  margin-right: 40px;
  display: flex;
}

.topbar-right .user .user-img {
  margin-top: 15px;
  margin-left: 10px;
  cursor: pointer;
}

.user .out {
  font-size: 14px;
  position: absolute;
  top: 80px;
  right: 0px;
  background-color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 12px;
}

.user .out ul {
  list-style: none;
}

.user .out ul > li {
  height: 26px;
  line-height: 26px;
}

.out a {
  text-decoration: none;
  color: #000;
}

.out .exit {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid #ccc;
}
</style>
